<template>
  <n-modal v-model:show="showProfileModal">
    <n-card class="form-card" title="个人信息" :bordered="false">
      <template #header-extra>
        <n-button quaternary circle @click="emit('close')">
          <template #icon>
            <n-icon><close-icon /></n-icon>
          </template>
        </n-button>
      </template>
      <n-form ref="formRef" :model="tmpUserInfo" :rules="rules">
        <n-form-item path="name" label="姓名">
          <n-input v-model:value="tmpUserInfo.name" @keydown.enter.prevent />
        </n-form-item>
        <n-form-item path="degree" label="学历">
          <n-select
            v-model:value="tmpUserInfo.degree"
            filterable
            :options="DEGREES_OPTIONS"
          />
        </n-form-item>
        <n-form-item path="position" label="职称">
          <n-select
            v-model:value="tmpUserInfo.position"
            filterable
            :options="POSITIONS_OPTIONS"
          />
        </n-form-item>
        <n-form-item path="institution" label="机构">
          <n-input
            maxlength="50"
            show-count
            v-model:value="tmpUserInfo.institution"
            @keydown.enter.prevent
          />
        </n-form-item>
        <n-form-item path="department" label="所属单位">
          <n-input
            maxlength="50"
            show-count
            v-model:value="tmpUserInfo.department"
            @keydown.enter.prevent
          />
        </n-form-item>
        <n-form-item path="field" label="研究领域">
          <n-select
            v-model:value="tmpUserInfo.field"
            filterable
            :options="FIELDS_OPTIONS"
          />
        </n-form-item>
        <n-form-item path="currentActivity" label="个人介绍">
          <n-input
            v-model:value="tmpUserInfo.currentActivity"
            maxlength="120"
            show-count
            type="textarea"
            :autosize="{
              minRows: 3
            }"
            @keydown.enter.prevent
          />
        </n-form-item>
      </n-form>
      <template #footer>
        <div class="flex justify-end">
          <n-button class="cancel-btn" @click="emit('close')">取消</n-button>
          <n-button type="primary" @click="submit">确定</n-button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup>
import { Close as CloseIcon } from '@vicons/ionicons5'
import { DEGREES, POSITIONS, FIELDS } from '@/assets/constant/UserInfo'

const props = defineProps(['tmpUserInfo', 'showProfileModal'])
const emit = defineEmits()

const message = useMessage()

const formRef = ref(null)

const DEGREES_OPTIONS = DEGREES.map((item) => {
  return {
    label: item,
    value: item
  }
})

const POSITIONS_OPTIONS = POSITIONS.map((item) => {
  return {
    label: item,
    value: item
  }
})

const FIELDS_OPTIONS = FIELDS.map((item) => {
  return {
    label: item,
    value: item
  }
})

const rules = {
  name: [
    {
      required: true,
      validator(rule, value) {
        if (!value) {
          return new Error('请输入姓名')
        } else if (value.length > 50) {
          return new Error('姓名长度应小于50字符')
        }
        return true
      },
      trigger: ['input', 'blur']
    }
  ]
}

const submit = () => {
  formRef.value?.validate((error) => {
    if (!error) {
      emit('submit')
    } else {
      message.error('请检查信息是否符合规则')
    }
  })
}
</script>

<style scoped>
.form-card {
  width: 600px;
  overflow: auto;
}
.cancel-btn {
  margin-right: 1rem;
}
</style>
